import React from 'react';
import { Statistic, Icon } from 'antd';

const DifferenceSingle = props => {
  const { cellData, precision } = props;
  const { value, type, per } = cellData;
  let color = 'rgba(0, 0, 0, 0.65)';
  let x = value;
  let prefix = '';
  let suffix = '';
  let attribute = {};
  if (type === 'diff') {
    if (value > 0) {
      prefix = '+';
      color = 'rgba(255, 0, 25, 1)';
    } else if (value < 0) {
      x = value * -1;
      prefix = '-';
      color = 'rgba(67, 207, 124, 1)';
    } else {
      x = 0;
      color = '#faad13';
    }
  }
  if (type === 'per') {
    if (value > 0) {
      x = per;
      prefix = <Icon type="arrow-up" />;
      color = 'rgba(255, 0, 25, 1)';
      suffix = '%';
    } else if (value < 0) {
      x = per * -1;
      color = 'rgba(67, 207, 124, 1)';
      suffix = '%';
      prefix = <Icon type="arrow-down" />;
    } else if (value === 0) {
      x = 0;
      color = '#faad13';
      suffix = '%';
    } else {
      x = null;
      color = '#faad13';
    }
  }
  if (x || x === 0) {
    attribute = {
      prefix,
      suffix,
      valueStyle: { color },
      value: x.toFixed(type === 'per' ? 2 : precision),
    };
  } else {
    attribute = {
      prefix,
      valueStyle: { color },
      formatter: () => '-',
    };
  }
  return <Statistic {...attribute} />;
};
export default DifferenceSingle;
